<template>
	<view>
		<view class="flex-col page">
			<!-- 标题 -->
			<u-navbar title="家庭成员" :background="background" back-icon-color="#333333" back-icon-size="40"
				title-color="#333333" title-size="36" :title-bold="true">
				<view @click="addFamily" slot="right" class="slot-right flex-row items-center justify-center">
					<image src="/static/family_add.png" class="image_add" mode=""></image>
					<text>添加成员</text>
				</view>
			</u-navbar>
			<view class="flex-col items-center">
				
				<view class="flex-row justify-between items-center self-stretch  group">
					
						<image @click="preSwiper" class="arrow-img-lf" src="/static//arrow_left_gray.png" mode=""></image>
					
					<swiper
					  class="swiper"  
					  :indicator-dots="false"  
					  :autoplay="false"  
					  interval="3000"  
					  duration="500" 
					   :current="current"
					   @change="swiperChange"
					   :disable-touch="true"
					>  
					
					  <swiper-item v-for="(pageData, index) in splitArr" :key="index" class="swiper-item">  
					  
						<view class="character-list flex-row items-center justify-center"
							v-for="(item,index) in pageData" :key="index">
							<image :src="item.avatar" class="avatar-img" mode=""></image>
						</view>
					  </swiper-item>  
					</swiper>  
					
						<image @click="nextSwiper" class="arrow-img-rg" src="/static/arrow_right_gray.png" mode=""></image>
						
					
				</view>
			</view>
		</view>
		
		<view class="flex-col main-title">
			<image src="/static/family_list_title.png" class="title-img" mode=""></image>
		</view>
		
		<view class="main-list flex-row justify-between">
			<view class="family-list1-item" :class="item.class" v-for="(item,index) in familyList1" :key="index">
				<view class="family-list1-item-name">{{item.name}}</view>
				<view class="family-list1-birth">出生日期：{{item.birth}}</view>
				<view class="family-list1-bottom flex-row items-center">
					<view class="family-list1-bottom-avatar">
						<image :src="item.avatar" class="list1-avatar-img" mode=""></image>
					</view>
					<view class="family-list1-bottom-times flex-row items-center">
						<image src="/static/family_list_mess_icon.png" class="message-icon" mode=""></image>
						<text class="family-list1-bottom-times-text">聊天{{item.num}}次</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				nickname: '',
				birthShow: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				birth:'2019-10-22',
				sexList: [
					{
						title: '男生',
						icon: '/static/add_child_boy.png'
					},
					{
						title: '女生',
						icon: '/static/add_child_girl.png'
					}
				],
				sex: 0,//0男生1女生
				familyList: [
					{
						title: 'mother',
						avatar: '/static/mother_icon.png',
					},
					{
						title: 'father',
						avatar: '/static/father_icon.png'
					},
					{
						title: 'grandmother',
						avatar: '/static/grandmother_icon.png'
					},
					{
						title: 'grandfather',
						avatar: '/static/grandfather_icon.png'
					},
					{
						title: 'mother',
						avatar: '/static/mother_icon.png',
					},
					{
						title: 'father',
						avatar: '/static/father_icon.png'
					},
					{
						title: 'grandmother',
						avatar: '/static/grandmother_icon.png'
					},
					{
						title: 'grandfather',
						avatar: '/static/grandfather_icon.png'
					},{
						title: 'mother',
						avatar: '/static/mother_icon.png',
					},
					{
						title: 'father',
						avatar: '/static/father_icon.png'
					}
				],
				familyBgBackground: [
					'mother-bg','father-bg','grandmother-bg','grandfather-bg','sister-bg','uncle-bg',
				],
				familyList1: [
					{
						name: '奶糖妈妈',
						type: 'mother',
						avatar: '/static/mother_icon.png',
						birth: '1990.10.11',
						num: 283
					},
					{
						name: '奶糖妈妈',
						type: 'father',
						avatar: '/static/father_icon.png',
						birth: '1990.10.11',
						num: 283
					},
					{
						name: '奶糖妈妈',
						type: 'grandmother',
						avatar: '/static/grandmother_icon.png',
						birth: '1990.10.11',
						num: 283
					},
					{
						name: '奶糖妈妈',
						type: 'grandfather',
						avatar: '/static/grandfather_icon.png',
						birth: '1990.10.11',
						num: 283
					},
					{
						name: '奶糖妈妈',
						type: 'sister',
						avatar: '/static/sister_icon.png',
						birth: '1990.10.11',
						num: 283
					},
					{
						name: '奶糖妈妈',
						type: 'uncle',
						avatar: '/static/uncle_icon.png',
						birth: '1990.10.11',
						num: 283
					},
					{
						name: '奶糖妈妈',
						type: 'sister',
						avatar: '/static/sister_icon.png',
						birth: '1990.10.11',
						num: 283
					},
					{
						name: '奶糖妈妈',
						type: 'uncle',
						avatar: '/static/uncle_icon.png',
						birth: '1990.10.11',
						num: 283
					}
				]
			}
		},
		computed:{
			splitArr(){
				// 假设这是你的原始大数组  
				let originalArray = this.familyList;  
				  
				// 初始化一个空数组来存储切割后的子数组  
				let chunkedArray = [];  
				  
				// 计算需要切割的轮数，注意Math.ceil用于确保如果元素数量不是8的倍数，也能正确切割  
				let chunks = Math.ceil(originalArray.length / 4);  
				  
				// 使用for循环来切割数组  
				for (let i = 0; i < chunks; i++) {  
				  // slice方法从i*8开始切割，直到(i+1)*8（但不包括(i+1)*8），实现每8条数据切割一次  
				  // 注意：如果数组长度不是8的倍数，最后一次切割可能会少于8条数据  
				  let chunk = originalArray.slice(i * 4, (i + 1) * 4);  
				  // 将切割后的子数组添加到总数组中  
				  chunkedArray.push(chunk);  
				} 
				 return chunkedArray
				  
			}
		},

		onShow() {
			
		},
		onLoad() {
			this.getData()
		},
		methods: {
			addFamily(){
				uni.navigateTo({
					url: '/pages/addFamily/index'
				})
			},
			swiperChange(e){
				this.current = e.detail.current
			},
			preSwiper(){
				this.current--;
				if (this.current < 0) {
				        this.current = this.splitArr.length - 1;
				}
			},
			nextSwiper(){
				this.current++;
				if (this.current >= this.splitArr.length) {
				        this.current = 0;
				      }
			},
			getData(){
				var arr = this.familyList1.map((item,index) => {
					var key = index % 6
					return {
						...item,
						class: this.familyBgBackground[key]
					}
				})
				this.familyList1 = arr
			},
			openBirthPicker() {
				this.birthShow = true
			},
			confirmBirth(e) {
				console.log(e, 'eeeeee')
				this.birth = e.year + '-' + e.month + '-' + e.day
			},
			
		}
	}
</script>

<style>
	@import url('../../common/css/common.css');

	.mt-95-5 {
		margin-top: 191rpx;
	}

	.mt-9-5 {
		margin-top: 19rpx;
	}

	.mt-4-5 {
		margin-top: 9rpx;
	}

	.mt-49 {
		margin-top: 98rpx;
	}
	page {
		background-color: rgtba(0,0,0,0);
	}

	.page {
		padding-bottom: 39rpx;
		/* background-color: #ffffff; */
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 320rpx;
		background-image: url(../../static/family_top_bg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		/* border: 1rpx solid red; */
	}

	.group {
		padding-bottom: 7rpx;
		/* width: 650rpx; */
		width: 100%;
		padding: 0 20rpx;
		margin: 0 auto;
		margin-top: 28rpx;
		/* width: 100%; */
	}
	.main-title {
		width: 100%;
		height: 228rpx;
		/* background: linear-gradient(0deg, #ffffff, #f1fafe); */
		background: linear-gradient(180deg, #f1fafe, #ffffff);
		/* margin-top: 40rpx; */
		padding: 20rpx 34rpx;
	}
	.title-img {
		width: 179rpx;
		height: 59rpx;
	}
	.main-list {
		width: 100%;
		flex-wrap: wrap;
		margin-top: -124rpx;
		padding: 0 31rpx;
	}
	.list1-avatar-img {
		width: 112rpx;
		height: 112rpx;
		border-radius: 50%;
		z-index: 100;
	}
	.message-icon {
		width: 19rpx;
		height: 19rpx;
		margin-right: 5rpx;
	}
	.mother-bg {
		/* width: 330rpx; */
		height: 326rpx;
		border-radius: 24rpx;
		background: linear-gradient(0deg, #fbebfd, #eadafc);
	}
	.father-bg {
		/* width: 330rpx; */
		height: 326rpx;
		border-radius: 24rpx;
		background: linear-gradient(0deg, #ddf5fc, #bffcf0);
	}
	.grandmother-bg {
		/* width: 330rpx; */
		height: 326rpx;
		border-radius: 24rpx;
		background: linear-gradient(0deg, #d9f4fb, #d5e6fc);
	}
	.grandfather-bg {
		/* width: 330rpx; */
		height: 326rpx;
		border-radius: 24rpx;
		background: linear-gradient(0deg, #d9e1fb, #ddd5fb);
	}
	.sister-bg {
		/* width: 330rpx; */
		height: 326rpx;
		border-radius: 24rpx;
		background: linear-gradient(0deg, #fff7e3, #fffac1);
	}
	.uncle-bg {
		/* width: 330rpx; */
		height: 326rpx;
		border-radius: 24rpx;
		background: linear-gradient(0deg, #FFD4D4, #FFD8E6);
	}
	.family-list1-item {
		margin-bottom: 28rpx;
		padding: 54rpx 30rpx 30rpx 32rpx;
		/* width: 48%; */
		width: 330rpx;
		
	}
	.family-list1-bottom-times {
		/* width: 216rpx;
		height: 43px; */
		border-radius: 21rpx;
		opacity: 0.7;
		background: #ffffff;
		padding: 8rpx 26rpx 8rpx 70rpx;
		z-index: 99;
		margin-left: -64rpx;
		margin-top: 40rpx;
	}
	.family-list1-item-name {
		font-weight: 600;
		font-size: 36rpx;
		text-align: left;
		color: #000000;
	}
	.family-list1-birth {
		font-weight: 400;
		font-size: 22rpx;
		color: #83888F;
		margin-top: 21rpx;
		margin-bottom: 52rpx;
	}
	.family-list1-bottom-times-text {
		font-weight: 400;
		font-size: 20rpx;
		color: #83888F;
		
	}
	
	
	
	
	
	
	
	

	

	.image_hi {
		width: 146rpx;
		height: 56rpx;
		margin-bottom: 34rpx;
	}

	.nickname-input {
		text-align: center;
	}

	.section_2 {
		padding: 14rpx 27rpx;
		background-color: #ffffffe6;
		border-radius: 32rpx;
	}

	.image_3 {
		width: 62rpx;
		height: 38rpx;
	}

	.image_4 {
		width: 35rpx;
		height: 35rpx;
	}

	.image_6 {
		margin-right: 42rpx;
		width: 172rpx;
		height: 62rpx;
	}

	.image {
		width: 402rpx;
		height: 409rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	

	.pos_2 {
		position: absolute;
		left: 62rpx;
		top: 0;
	}

	.text {
		margin-right: 75rpx;
		color: #000000;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
	}

	.pos_5 {
		position: absolute;
		left: 49rpx;
		bottom: 153rpx;
	}

	.font {
		font-size: 60rpx;
		font-family: PingFang SC;
		line-height: 56rpx;
		font-weight: 500;
		color: #171832;
	}

	.text_2 {
		color: #171832;
		font-size: 60rpx;
		font-family: EmojiOne;
		line-height: 56rpx;
	}

	.group_2 {
		line-height: 32rpx;
		width: 395rpx;
	}

	.pos_6 {
		position: absolute;
		left: 44rpx;
		top: 295rpx;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #171832;
		font-weight: 500;
	}

	.image_5 {
		width: 194rpx;
		height: 225rpx;
	}

	.pos_4 {
		position: absolute;
		right: 60rpx;
		bottom: 28rpx;
	}

	.image_2 {
		width: 655rpx;
		height: 24rpx;
	}

	.pos_3 {
		position: absolute;
		right: 35rpx;
		top: 33rpx;
	}

	.image-wrapper {}

	.image-avatar {
		width: 171rpx;
		height: 172rpx;
		border-radius: 50%;
	}

	.image_7 {
		margin-left: 120rpx;
		width: 52rpx;
		height: 52rpx;
		position: absolute;
		bottom: 0;
	}

	.group_3 {
		margin-top: 26rpx;
		width: 654rpx;

		/* padding: 0 48rpx; */
	}

	.font_3 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		font-weight: 500;
		color: #616274;
	}

	.text_3 {
		margin-left: 17rpx;
	}

	.input {
		align-self: stretch;
	}

	.text-wrapper_2 {
		/* padding: 39rpx 0 34rpx; */
		padding: 34rpx 0;
		border-radius: 49rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #fff;
		/* background-image: url('https://ide.code.fun/api/image?token=669493cab8c7cd0011a5d042&name=40a41de92fd661b50375a0e897dd0773.png'); */
		/* background-size: 100% 100%;
		background-repeat: no-repeat; */
	}

	.font_4 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
		font-weight: 500;
		color: #171832;
	}

	.group_4 {
		margin-top: 35rpx;
		padding: 0 50rpx;
	}

	.text_4 {
		margin-left: 15rpx;
	}

	.section_3 {
		/* padding: 38rpx 34rpx; */
		padding: 34rpx 0;
		border-radius: 24rpx;
		/* background-image: url('https://ide.code.fun/api/image?token=669493cab8c7cd0011a5d042&name=b4d5ce12a695d85da0b34429fff5c459.png'); */
		width: 651rpx;
		height: 99rpx;
		background: #fff;
		
	}

	.text_5 {
		line-height: 24rpx;
	}

	.image_8 {
		width: 17rpx;
		height: 11rpx;
	}

	.pos_7 {
		position: absolute;
		right: 34rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.text_6 {
		margin-left: 65rpx;
		margin-top: 34rpx;
	}

	.equal-division {
		align-self: center;
		margin-top: 22rpx;
		width: 651rpx;
	}

	.image_9 {
		width: 112rpx;
		height: 112rpx;
		margin-top: 13rpx;
	}

	.section_4 {
		/* flex: 1 1 297rpx; */
	}

	.equal-division-item {
		/* padding: 12rpx 0 28rpx; */
		width: 297rpx;
		background: #fff;
		border-radius: 24rpx;
		height: 241rpx;
		/* border-left: solid 1rpx #eff4ff;
		border-right: solid 1rpx #eff4ff;
		border-top: solid 1rpx #eff4ff;
		border-bottom: solid 1rpx #eff4ff; */
	}
	.equal-division-item1 {
		width: 303rpx;
		height: 247rpx;
		background-image: url('../../static/addchild_checked_sex.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.text_7 {
		margin-left: 65rpx;
		margin-top: 33rpx;
		line-height: 26rpx;
	}

	.text-wrapper_3 {
		margin: 23rpx 0 100rpx 0;
		padding: 34rpx 0;
		border-radius: 24rpx;
		/* background-image: url('https://ide.code.fun/api/image?token=669493cab8c7cd0011a5d042&name=ee30b1d23a7174f06abced713b6ddba4.png');
		background-size: 100% 100%;
		background-repeat: no-repeat; */
		width: 651rpx;
		height: 99rpx;
		background: linear-gradient(90deg, #ecf7fd, #faf7fe);
	}

	.text_8 {
		line-height: 32rpx;
	}

	.button {
		margin: 0 28rpx;
	}

	.text-wrapper_4 {
		padding: 32rpx 0;
		border-radius: 44rpx;
		background: linear-gradient(90deg, #b8e2ff, #bfbdff);
		/* background-image: url('https://ide.code.fun/api/image?token=669493cab8c7cd0011a5d042&name=7b25aaee48ad626d06f87f71558b7c8f.png'); */
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.text_9 {
		color: #151515;
		line-height: 29rpx;
	}
	.submit-button {
		width: 524rpx;
		height: 134rpx;
	}
	.slot-right {
		width: 164rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		border-radius: 28rpx;
		background: #fff;
		margin-right: 33rpx;
		font-weight: 600;
		font-size: 24rpx;
		color: #000000;
	}
	.image_add {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}
	.character-list {
		width: 128rpx;
		height: 128rpx;
		/* opacity: 0.42;
		background: #40cee3; */
		border: 2rpx solid #40cee3;
		border-radius: 50%;
		margin-right: 37rpx;
	}
	.avatar-img {
		width: 112rpx;
		height: 112rpx;
		border-radius: 50%;
	}
	.swiper {
	  /* width: 640rpx;  */
	  width: 100%;
	  height: 160rpx;
	  margin: 0 auto;
	  /* min-height: 200rpx; */
	  /* height: 100%;  */
	  /* height: 270px; */
	  /* padding: 20rpx; */
	}  
	.swiper-item {  
	  display: flex;  
	  flex-direction: row;  
	  /* height: 400rpx !important; */
	  /* justify-content: space-around; /* 或者其他布局方式 */  
	  /* align-items: baseline;  */
	  width: 100%; /* 确保swiper-item宽度充满整个swiper */  
	  flex-wrap: nowrap;
	  align-items: center;
	}  
	.page-data {  
	  width: 100%;  
	  display: flex;  
	  flex-wrap: wrap; /* 如果需要换行 */  
	}  
	.data-item {  
	  width: calc(100% / 4 - 20px); /* 假设每行显示4个数据项，调整间距 */  
	  margin: 10px;  
	  /* 其他样式 */  
	} 
	.arrow-img-lf,.arrow-img-rg {
		width: 16rpx;
		height: 29rpx;
	}
	.arrow-img-lf {
		margin-right: 32rpx;
	}
	.arrow-img-rg {
		margin-left: 10rpx;
	}
</style>